<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Tools</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/tools.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__/bootcssButtons.css" />
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.8.1/jquery.js"></script>
    <link href="__CSS__/toastr.css" rel="stylesheet" />
    <script src="__JS__/toastr.js"></script>
    <script src="__JS__/tools.js"></script>
</head>

<body>

    {if condition="isset($_COOKIE['user']) "}
    <div style="position:relative;height: 60px;width: 100%;background-color: #f9f9f9;border-bottom: 1px solid rgba(94, 94, 94, 0.767);">

        <!--本项目信息展示-->
        <div class="prj_info">
            <div style="float: left;">
                <div style="padding: 12px 0;float: left;">
                    <div class="return_btn" onclick="location.href='{:url('index/getProjects',array('userId'=>$_COOKIE['user']))}'">
                        <img style="width:24px;height: 24px;" src="__IMG__/return.png">
                    </div>
                </div>
                <p class="group_name">{$prjInfo['prj_name']}</p>
                <p class="tool_edit" onclick="$('#change_prj_name').show();
                $('#cover').css('display','block');
                $('#cover').css('height','100%'); ">
                    <span class="glyphicon glyphicon-edit"></span>更改名称</p>
            </div>



            <div style="margin: 10px;display: inline-block;">
                <div style="position:relative;float:left;font-size: 18px;color:#666666;">

                    {volist name="prjMembers" id="p"} {if condition="$p.id==$prjInfo['creator_id']"}
                    <div class="tooltip_left " style="float: none;">
                        <svg style="fill:#d81e06" t="1573030732563" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2246" width="30" height="30">
                        <path d="M512 950.857143c241.371429 0 438.857143-197.485714 438.857143-438.857143s-197.485714-438.857143-438.857143-438.857143-438.857143 197.485714-438.857143 438.857143 197.485714 438.857143 438.857143 438.857143z m0 73.142857c-285.257143 0-512-226.742857-512-512s226.742857-512 512-512 512 226.742857 512 512-226.742857 512-512 512z"  p-id="2247">

                        </path>
                        <text x="50%" y="65%" style="font-size:550px;text-anchor: middle;">
                            {:iconv_substr($p.usr_name,0,1)}
                        </text>
                    </svg>
                        <span class="tooltiptext_left">{$p.usr_name}</span>
                    </div>
                    <!--<b>(创建者)&nbsp;&nbsp;</b>-->
                    {else/}
                    <div class="tooltip_left " style="float: none;">
                        <svg style="fill:#8198ff;" t="1573030732563" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2246" width="30" height="30">
                        <path d="M512 950.857143c241.371429 0 438.857143-197.485714 438.857143-438.857143s-197.485714-438.857143-438.857143-438.857143-438.857143 197.485714-438.857143 438.857143 197.485714 438.857143 438.857143 438.857143z m0 73.142857c-285.257143 0-512-226.742857-512-512s226.742857-512 512-512 512 226.742857 512 512-226.742857 512-512 512z" p-id="2247">
                        </path>
                        <text x="50%" y="65%" style="font-size:550px;text-anchor: middle;">
                            {:iconv_substr($p.usr_name,0,1)}
                        </text>
                    </svg>

                        <span class="tooltiptext_left">{$p.usr_name}</span>
                    </div>
                    {/if} {/volist}
                </div>

                <div class="member_option">

                    <svg onclick="$('#member_add').show();
                    $('#cover').css('display','block');
                    $('#cover').css('height','100%'); " style="width: 30px;height: 30px;cursor: pointer;">
                    <svg>
                        <circle style="fill:none;stroke:#B3B3B3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4.0002,4.0002;" cx="15" cy="15" r="14.01"/>
                    </svg>
                    <line style="fill:none;stroke:#B3B3B3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="8.46" y1="15" x2="21.54" y2="15" />
                    <line style="fill:none;stroke:#B3B3B3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="15" y1="21.54" x2="15" y2="8.46" />
                    </svg>


                    {if condition="$prjInfo['creator_id'] == $_COOKIE['user']"}

                    <svg onclick="$('#member_del').show();
                    $('#cover').css('display','block');
                    $('#cover').css('height','100%');" style="width: 30px;height: 30px;cursor: pointer;">
                    <svg>
                        <circle style="fill:none;stroke:#B3B3B3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4.0002,4.0002;" cx="15" cy="15" r="14.01"/>
                    </svg>
                    <line style="fill:none;stroke:#B3B3B3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="8.46" y1="15" x2="21.54" y2="15" />
                    </svg>
                    {/if}
                </div>
            </div>
        </div>

        <!--更改项目名称part-->
        <div id="change_prj_name" class="showdiv" style="height: 180px;">
            <div class="showdiv_title">
                更改小组名称
            </div>

            <div class="showdiv_prompt">

                <form onsubmit="return checkChangePrjName()" action="{:url('index/changePrjName')}" method="post">
                    请输入新的小组名称：
                    <input type="text" name="prjName" id="newPrjName" />


                    <div id="invalid_length" style="display: none;color: red;font-size: 13px;">小组名称暂时不支持超过10个字符</div>

                    <input type="hidden" name="prjId" value="{$prjId}" />

                    <button type="button" class="button button-medium " onclick="$('#change_prj_name').hide();
                    $('#cover').css('display','none');" style="margin:35px 0 10px 33%;">
                    取消</button>
                    <button type="submit" class="button button-action button-medium" style="margin-left: 10px;margin-bottom: 10px">
                    确定</button>
                </form>
            </div>
        </div>


        <!--添加项目成员part-->
        <div id="member_add" class="showdiv" style="display: none">
            <div class="showdiv_title">
                添加小组成员
            </div>

            <div class="showdiv_prompt">
                请输入要添加成员的用户ID或用户名：
                <input type="text" name="userId" id="userId" style="margin-left: 50px;margin-top: 10px;" />
                <input type="hidden" value="{$prjId}" id="prjId" name="prjId" />
            </div>

            <button class="button button-medium " onclick="$('#member_add').hide();
                    $('#cover').css('display','none');" style="margin-left: 34%;margin-bottom: 10px;margin-top: 40px;">
        关闭</button>
            <button onclick="sendAddPrjMember()" class="button button-action button-medium" style="margin-left: 10px;margin-bottom: 10px">
            确定</button>

        </div>


        <!--删除项目成员part-->
        <div id="member_del" class="showdiv" style="display: none">

            <div class="showdiv_title">
                移出小组成员
            </div>

            <div class="showdiv_prompt" style="height: 130px;">
                请选择要移出成员的用户ID：
                <select id="member_del_select">
                {volist name="prjMembers" id="p"}
                    {if condition="$p.id != $prjInfo['creator_id']"}

                    <option selected="selected" disabled="disabled"  style='display: none' value=''></option>

                    <option value="{$p.id}">{$p.usr_name}[ID:{$p.id}]</option>
                    {/if}
                {/volist}
                </select>
                <br><br>
                <button class="button button-medium " onclick="$('#member_del').hide();
                    $('#cover').css('display','none');" style="margin-left: 25%;margin-bottom: 10px;">
                关闭</button>
                <button onclick="delMember('{$prjId}')" class="button button-action button-medium" style="margin-left: 10px;margin-bottom: 10px">
                确定</button>
                </form>
            </div>
        </div>

    </div>


    <div style="display: flex;">
        <!--两列布局：左侧-->
        <div style="float: left;width: 180px;">

            <div>
                <div id="discussion_tab" class="tab_one">
                    <img src="__IMG__/remen.png">
                    <div class="tab_content" onclick="
                    $('#creation_tab').css('background-color','');
                    $('#discussion_tab').css('background-color','#e8e8e8');
                    $('#creation_content').hide();
                    $('#discussion_content').show();">练习</div>
                </div>
                <div id="creation_tab" class="tab_one">
                    <div class="tab_content" onclick="
                    $('#creation_tab').css('background-color','#e8e8e8');
                    $('#discussion_tab').css('background-color','');
                    $('#creation_content').show();
                    $('#discussion_content').hide();">我的项目</div>
                </div>
            </div>
        </div>


        <!--两列布局：右侧-->
        <div style="overflow: hidden;border-left:solid 1px #bbbbbe;flex:1">
            <!--创意part-->
            <div id="creation_content" style="display: none;">
                <div style="margin:23px 0;height: -webkit-max-content;">
                    <!--<text style="font-size: 24px;float: left;">工具</text>-->
                    <button class="add_tool" onclick="showWindow()" style="color:white;margin:0 3%;">
                    新增工具</button>
                </div>
                <!--项目的工具列表-->


                {volist name="tools" id="t"}
                <div class="tool_item" onclick="location.href='{:url('index/getRecords',array('toolId'=>$t.id))}'" style="position: relative;">
                    {if condition="$t.tool_type=='共感图'"}
                    <img class="tool_item_sub" src="__IMG__/tool_gonggantu.png" style="opacity:0.6;">
                    <div class="tool_item_sub" style="height: 30px;">
                        {$t.tool_type}： {if condition="strlen($t.targetUser) == 0"} (目标用户未定义) {else/} {if condition="iconv_strlen($t.targetUser) > 10"} {:iconv_substr($t.targetUser,0,10)."..."} {else/} {$t.targetUser} {/if} {/if}

                    </div>
                    {elseif condition="$t.tool_type=='商业模式画布'"}
                    <img class="tool_item_sub" src="__IMG__/tool_business.png" style="opacity:0.6;">
                    <div class="tool_item_sub" style="height: 30px;">
                        {$t.tool_type}
                    </div>
                    {elseif condition="$t.tool_type=='四象限法'"}
                    <img class="tool_item_sub" src="__IMG__/tool_si.png" style="opacity:0.6;">
                    <div class="tool_item_sub" style="height: 30px;">
                        {$t.tool_type}： {if condition="strlen($t.purpose) == 0"} (目标未定义) {else/} {if condition="iconv_strlen($t.purpose) > 10"} {:iconv_substr($t.purpose,0,10)."..."} {else/} {$t.purpose} {/if} {/if}
                    </div>
                    {elseif condition="$t.tool_type=='HMW'"}
                    <img class="tool_item_sub" src="__IMG__/tool_HMW.png" style="opacity:0.6;">
                    <div class="tool_item_sub" style="height: 30px;">
                        {$t.tool_type}
                    </div>
                    {elseif condition="$t.tool_type=='用户旅程图'"}
                    <img class="tool_item_sub" src="__IMG__/tool_business.png" style="opacity:0.6;">
                    <div class="tool_item_sub" style="height: 30px;">
                        {$t.tool_type}
                    </div>
                    {/if}


                    <div>
                        {in name="t.id" value="$newToolIds"}
                        <img style="position: absolute;top:0%;right:0%;width: 18%;" src="__IMG__/new_tool.png"> {/in}
                    </div>
                </div>
                {/volist}


            </div>

            <!--讨论part-->
            <div id="discussion_content" style="margin: 25px 0px 0px 3%;">
                {volist name="quesBank" id="q"}
                <div>
                    <div>
                        {$i}.&nbsp;{$q.ques_type}&nbsp;|&nbsp;{$q.content}
                    </div>
                    <div style="width: 280px;height: 190px;margin: 20px;border: 1px solid #d9d9d9;">
                        <div onclick="location.href='{:url('index/getQuesTool',array('quesId'=>$q.id, 'prjId'=>$prjId))}'" style="height:158px;line-height:158px;background-color: #f4f4f4;color:#437dff;text-align: center;cursor: pointer;">

                            <!--点击开始我和组员的讨论-->
                            {if condition="$q.tool_type=='共感图'"}
                            <img src="__IMG__/ques_gonggantu_team.png" style="width: 100%;"> {elseif condition="$q.tool_type=='HMW'"/}
                            <img src="__IMG__/ques_HMW_team.png" style="width: 100%;"> {/if}
                        </div>
                        <div style="font-size: 14px;padding: 5px 0 5px 10px;">
                            {$q.tool_type} {if condition="$q.tool_extra != ''"} &nbsp;:&nbsp;{$q.tool_extra} {/if}
                        </div>
                    </div>

                </div>
                {/volist}
            </div>
        </div>


    </div>


    <!--以下为新增工具时的弹窗相关-->
    <!-- 遮罩层 -->
    <div id="cover" class="cover"></div>
    <!-- 弹窗 -->
    <div id="showdiv" class="showdiv" style="width: 1190px;height: 450px;left: 5%;top: 16%;">
        <!-- 标题 -->
        <div class="showdiv_title">
            创建工具
        </div>
        <!-- 内容 -->

        <div id="gonggantu_option" class="add_tool_type_div" onclick="
            $('.add_tool_type_div').each(function(idx,ele) {
                $(ele).css('border','solid 1px lightgray');
            });

            $(this).css('border','solid 2px blue');

            addToolTypeIdx = 0;
            $('#next_step_btn').attr('onclick','addToolsConfirm()' );">
            <div style="width: 100%;height: 120px;background-color: lightgray;">
                <img src="__IMG__/add_tool_gonggantu.png" style="width: 100%;">
            </div>

            <div class="tool_type_text" style="font-size:14px;margin-top:25px;">
                <div class="tool_type_str" style="text-align: center;">共感图</div>
                <div style="margin: 15px 0px 0px 7px;">
                    用拟人化的方法，帮助我们将注意力集中在用户身上，通过收集大量信息，了解目标用户所想、所听、所见、所说，以此明确用户的痛点和需求点。
                </div>
            </div>
        </div>


        <div id="sixiangxian1_option" class="add_tool_type_div" onclick="
        $('.add_tool_type_div').each(function(idx,ele) {
            $(ele).css('border','solid 1px lightgray');
        });
        $(this).css('border','solid 2px blue');

        addToolTypeIdx = 1;
        $('#next_step_btn').attr('onclick','addToolsConfirm()' ); ">
            <div style="width: 100%;height: 120px;background-color: lightgray;">
                <img src="__IMG__/add_tool_si1.png" style="width: 100%;">
            </div>

            <div class="tool_type_text" style="font-size:14px;margin-top:25px;">
                <div class="tool_type_str" style="text-align: center;">四象限法:可行性——价值</div>
                <div style="margin: 15px 0px 0px 7px;">
                    用于从“可行性”与“价值”维度评估想法，帮助我们在众多想法中决策出当前可行性高&价值高的。
                </div>
            </div>
        </div>

        <div id="sixiangxian2_option" class="add_tool_type_div" onclick="
        $('.add_tool_type_div').each(function(idx,ele) {
            $(ele).css('border','solid 1px lightgray');
        });

        $(this).css('border','solid 2px blue');

        addToolTypeIdx = 2;
        $('#next_step_btn').attr('onclick','addToolsConfirm()' ); ">
            <div style="width: 100%;height: 120px;background-color: lightgray;">
                <img src="__IMG__/add_tool_si2.png" style="width: 100%;">
            </div>

            <div class="tool_type_text" style="font-size:14px;margin-top:25px;">
                <div class="tool_type_str" style=" text-align: center;">四象限法:紧急度——重要性</div>
                <div style="margin: 15px 0px 0px 7px;">
                    用于从“重要性”与“紧急程度”维度评估想法，帮助我们为众多想法排序，重要&紧急的要立即搞定；重要&不紧急的要制定计划、稳步推进。
                </div>
            </div>
        </div>

        <div id="business_option" class="add_tool_type_div" onclick="
        $('.add_tool_type_div').each(function(idx,ele) {
            $(ele).css('border','solid 1px lightgray');
        });

        $(this).css('border','solid 2px blue');

        /*$('#next_step_btn').show(); $('#next_step_btn').html('确认');*/

        addToolTypeIdx = 3;
        $('#next_step_btn').attr('onclick','addToolsConfirm()' );">
            <div style="width: 100%;height: 120px;background-color: lightgray;">
                <img src="__IMG__/add_tool_business.png" style="width: 100%;">
            </div>

            <div class="tool_type_text" style="font-size:14px;margin-top:25px;">
                <div class="tool_type_str" style="text-align: center;">商业模式画布</div>
                <div style="margin: 15px 0px 0px 7px;">
                    用于将商业模式中的9个元素（价值主张、关键业务等）标准化，并强调元素间的相互作用，很好的体现了系统观的思维模式。
                </div>
            </div>
        </div>


        <div id="HMW_option" class="add_tool_type_div" onclick="
        $('.add_tool_type_div').each(function(idx,ele) {
            $(ele).css('border','solid 1px lightgray');
        });

        $(this).css('border','solid 2px blue');

        addToolTypeIdx = 4;
        $('#next_step_btn').attr('onclick','addToolsConfirm()' );">
            <div style="width: 100%;height: 120px;background-color: lightgray;">
                <img src="__IMG__/add_tool_HMW.png" style="width: 100%;">
            </div>

            <div class="tool_type_text" style="font-size:14px;margin-top:25px;">
                <div class="tool_type_str" style="text-align: center;">HMW(How Might We)</div>
                <div style="margin: 15px 0px 0px 7px;">
                    以How might we（我们应该如何）的句式开头，寻找解决问题的方向，不断扩展需要解决的问题，寻找创新机会点。
                </div>
            </div>
        </div>

        <!-- 按钮 -->

        <div class="button button-medium " onclick="closeWindow()" style="position: absolute;left: 35%;top: 86%;">
            取消</div>
        <div id="next_step_btn" class="button button-medium button-action" style="position:absolute;left: 55%;top: 86%;">
            确认</div>

    </div>

    {/if}

    <script>
        $('#header_projects').css('border-bottom', 'solid 2px #000000');
        $('#header_projects').css('font-weight', 'bold');


        $('#discussion_tab').css('background-color', '#e8e8e8');


        //判断左侧tab 默认是谁
        //if(location.href.indexOf('creation') > 0) {
        setTimeout(function() {
            //console.log($('div#creation_tab .tab_content'));
            $('div#creation_tab .tab_content').trigger('click');
        }, 0);
        //}
    </script>
    <script>
        var addToolTypeIdx = -1;
        var toolTypeArr = ['共感图', '四象限法:可行性——价值', '四象限法:紧急度——重要性', '商业模式画布', 'HMW'];

        function addToolsConfirm() {
            var prjId = '{$prjId}';

            var toolType = toolTypeArr[addToolTypeIdx];


            if (toolType.split(':')[0] == "四象限法") {

                var sixiangxian_type = toolType.split(':')[1];

                $.ajax({
                    type: "POST",
                    url: "__PUBLIC__/index/index/addTools",
                    data: {
                        prjId: prjId,
                        toolType: "四象限法",
                        sixiangxian_type: sixiangxian_type
                    },
                    success: function(result) {
                        //console.log(result);
                        window.location.href = window.location.href + "#creation";
                        window.location.reload();
                    }
                });
            } else {
                $.ajax({
                    type: "POST",
                    url: "__PUBLIC__/index/index/addTools",
                    data: {
                        prjId: prjId,
                        toolType: toolType
                    },
                    success: function(result) {
                        //console.log(result);
                        window.location.href = window.location.href + "#creation";
                        window.location.reload();
                    }
                });
            }
        }



        function checkAddMember() {
            //userid不能为空
            var userId = $('#userId').val();
            var prjId = $('#prjId').val();
            if (userId.length == 0) {
                toastr.error('请输入用户ID或用户名！');
                setTimeout(function() {
                    toastr.clear();
                }, 2000);
                return false;
            }


            //输入不存在的用户id无效
            var ajaxFlag = true; //用flag的方式，使得子函数$.ajax与主函数check()交互起来
            $.ajax({
                type: "POST",
                url: "__PUBLIC__/index/index/isUserIdExist",
                async: false, //设置同步方式，非异步！
                cache: false, //严格禁止缓存！
                data: {
                    userId: userId
                },
                success: function(data) {
                    //console.log(data);
                    if (data == "0") {
                        toastr.error('该用户ID或用户名不存在！');
                        setTimeout(function() {
                            toastr.clear();
                        }, 2000);

                        ajaxFlag = false;
                    }
                }
            });
            if (!ajaxFlag) {
                return false;
            }


            //输入已经存在该项目中的userid无效
            $.ajax({
                type: "POST",
                url: "__PUBLIC__/index/index/isUserAlreadyIn",
                async: false, //设置同步方式，非异步！
                cache: false, //严格禁止缓存！
                data: {
                    userId: userId,
                    prjId: prjId
                },
                success: function(data) {
                    //console.log(data);
                    if (data == "0") {
                        toastr.error('该用户已存在于小组中或邀请已发送');
                        setTimeout(function() {
                            toastr.clear();
                        }, 2000);

                        ajaxFlag = false;
                    }
                }
            });
            if (!ajaxFlag) {
                return false;
            }

            //window.location.reload();
            return true;
        }

        function sendAddPrjMember() {
            if (checkAddMember()) {
                $.ajax({
                    type: "POST",
                    url: "__PUBLIC__/index/index/addPrjMember",
                    async: false, //设置同步方式，非异步！
                    cache: false, //严格禁止缓存！
                    data: {
                        prjId: $('#prjId').val(),
                        userId: $('#userId').val()
                    },
                    success: function() {
                        toastr.info('添加请求已发送，等待对方确认~');
                        setTimeout(function() {
                            toastr.clear();
                        }, 3000);
                    }
                });
            }
        }

        function showWindow() {
            $('#showdiv').show(); //显示弹窗
            $('#cover').css('display', 'block'); //显示遮罩层
            $('#cover').css('height', '100%'); //设置遮罩层的高度为当前页面高度
        }

        // 关闭弹窗
        function closeWindow() {
            $('#showdiv').hide(); //隐藏弹窗
            $('#showdiv_gonggan').hide(); //隐藏弹窗
            $('#showdiv_si').hide(); //隐藏弹窗
            $('#cover').css('display', 'none'); //隐藏遮罩层
        }

        //检查更改的新项目名称是否有效
        function checkChangePrjName() {
            var prj_name = $('#newPrjName').val();

            if (prj_name.length > 10) {
                $('#invalid_length').show();
                return false;
            }

            var re = new RegExp("^[ ]+$");

            if (!re.test(prj_name) && prj_name != "" && prj_name != null) {
                window.location.reload();

                return true;
            }

            toastr.error('小组名称不能为空或空格！');
            setTimeout(function() {
                toastr.clear();
            }, 2000);

            return false;
        }


        function delMember(prjId) {
            var userId = $('#member_del_select').val();

            if (userId > 0) {
                $.ajax({
                    type: "POST",
                    url: "__PUBLIC__/index/index/delPrjMember",
                    data: {
                        prjId: prjId,
                        userId: userId
                    },
                    success: function(result) {
                        //console.log(result);
                        window.location.reload();
                    }
                });
            }
        }
    </script>


</body>

</html>